<template>
  <div id="app">
    <Header v-if="$route.meta.showHeader"></Header>
    <van-icon
      name="apps-o"
      class="main-icon-app"
      @click="showPopup"
      v-if="$route.meta.showPopup"
    />
    <transition mode="out-in">
      <!-- 占位符 -->
      <router-view></router-view>
    </transition>
    <!-- 左侧弹出层 -->
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
    >
      <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg" @click="goLogin">
        <van-icon name="arrow" size="20" class="gologin" />
      </van-image>
      <div class="tu-1">
        <div class="vip">
          <div>
            <li>
              续费黑胶VIP
              <p>会员中心</p>
            </li>
            <li>立享21项专属特权</li>
          </div>
          <van-cell
            title="受邀专享，黑胶首月仅需3.8元"
            style="
              background: url('https://img1.baidu.com/it/u=2900520078,2040325801&fm=26&fmt=auto');
              color: #ccc;
            "
          >
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="vip-card" class="search-icon" />
            </template>
          </van-cell>
        </div>
      </div>
      <div class="tu-2">
        <van-cell title="消息中心" is-link>
          <van-icon name="chat-o" size="20" color="black" />
        </van-cell>

        <van-cell title="云贝中心" is-link>
          <van-icon name="gold-coin-o" size="20" color="black" />
        </van-cell>
        <van-cell title="创作者中心" is-link>
          <van-icon name="flower-o" size="20" color="black" />
        </van-cell>
      </div>
      <div class="tu-3">
        <van-cell title="云村有票" is-link
          ><van-icon name="gold-coin-o" size="20" color="black" />
        </van-cell>
        <van-cell title="商城" is-link>
          <van-icon name="shopping-cart-o" size="20" color="black" />
        </van-cell>
        <van-cell title="游戏专区" is-link>
          <van-icon name="birthday-cake-o" size="20" color="black" />
        </van-cell>
        <van-cell title="口袋铃声" is-link>
          <van-icon name="flower-o" size="20" color="black" />
        </van-cell>
      </div>
      <div class="tu-4">
        <van-cell title="设置" is-link>
          <van-icon name="setting" size="20" color="black" />
        </van-cell>
        <van-cell title="夜间模式" is-link>
          <van-icon name="eye-o" size="20" color="black" />
        </van-cell>
        <van-cell title="定时关闭" is-link>
          <van-icon name="add" size="20" color="black" />
        </van-cell>
        <van-cell title="个性装扮" is-link>
          <van-icon name="shop-collect" size="20" color="black" />
        </van-cell>
        <van-cell title="边听边存" is-link>
          <van-icon name="service-o" size="20" color="black" />
        </van-cell>
        <van-cell title="在线听歌免流量" is-link>
          <van-icon name="clock-o" size="20" color="black" />
        </van-cell>
        <van-cell title="音乐黑名单" is-link>
          <van-icon name="cross" size="20" color="black" />
        </van-cell>
        <van-cell title="青少年模式" is-link>
          <van-icon name="shield-o" size="20" color="black" />
        </van-cell>
        <van-cell title="音乐闹钟" is-link>
          <van-icon name="underway-o" size="20" color="black" />
        </van-cell>
      </div>
      <div class="tu-5">
        <van-cell title="我的订单" is-link>
          <van-icon name="service-o" size="20" color="black" />
        </van-cell>
        <van-cell title="优惠卷" is-link>
          <van-icon name="invitation" size="20" color="black" />
        </van-cell>
        <van-cell title="我的客服" is-link>
          <van-icon name="service-o" size="20" color="black" />
        </van-cell>
        <van-cell title="分享网易云音乐" is-link>
          <van-icon name="share-o" size="20" color="black" />
        </van-cell>
        <van-cell title="关于" is-link>
          <van-icon name="info-o" size="20" color="black" />
        </van-cell>
      </div>
    </van-popup>
    <Footer v-if="$route.meta.showFooter"></Footer>
  </div>
</template>

<script>
import Footer from "./components/Footer.vue";
import Header from "./components/Head.vue";
export default {
  name: "app",
  data() {
    return {
      show: false,
    };
  },

  components: {
    Footer,
    Header,
  },
  methods: {
    //展示弹出层
    showPopup() {
      this.show = true;
    },
    goLogin() {
      this.$router.push("/login");
      window.location.reload();
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.main-icon-app {
  font-size: 20px;
  position: absolute;
  left: 10px;
  top: -35px;
  top: -25px;
}
.van-icon-apps-o:before {
  font-size: 20px;
}
.tu-2 {
  width: 90%;
  height: 140px;
  border: solid 1px #ccc;
  border-radius: 20px;
  margin: 15px 0px 0px 15px;
}
.tu-3 {
  width: 90%;
  height: 180px;
  border: solid 1px #ccc;
  border-radius: 20px;
  margin: 15px 0px 0px 15px;
}
.tu-4 {
  width: 90%;
  height: 400px;
  border: solid 1px #ccc;
  border-radius: 20px;
  margin: 15px 0px 0px 15px;
}
.tu-5 {
  width: 90%;
  height: 230px;
  border: solid 1px #ccc;
  border-radius: 20px;
  margin: 15px 0px 0px 15px;
}

/* .van-icon-chat-o:before {
  font-size: 19px;
} */
.vip {
  border: 2px solid #ccc;
  border-radius: 20px;
  margin: 10px;
  overflow: hidden;
  color: white;
  background: url("https://img1.baidu.com/it/u=2900520078,2040325801&fm=26&fmt=auto");
  padding-top: 20px;
}

.vip li {
  margin-left: 15px;
  display: flex;
}
.vip li:nth-child(1) {
  justify-content: space-between;
}

.vip li:nth-child(1) p {
  font-size: 12px;
  margin-right: 20px;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 20px;
}
.vip li:nth-child(2) {
  font-size: 12px;
  margin: 10px 15px;
}
.van-image img {
  width: 50px;
  height: 50px;
  margin-left: 20px;
  margin-top: 15px;
  border-radius: 50%;
}
.van-search {
  margin-top: -40px;
}
.gologin {
  position: absolute;
  top: -30px;
  left: 70px;
}
</style>
